<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/timepicker/examples" target="_blank">demos & documentation</a>
</m-notice>
<div class="row">
	<div class="col-xl-6">

		<m-material-preview [viewItem]="exampleTimepicker">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>

			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected time: {{time | json}}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleMeridian">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time2" [meridian]="meridian"></ngb-timepicker>
					<button class="btn btn-sm btn-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
						Meridian - {{meridian ? "ON" : "OFF"}}
					</button>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected time: {{time2 | json}}</pre> </div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSeconds">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time3" [seconds]="seconds"></ngb-timepicker>
					<button class="btn btn-sm btn-{{seconds ? 'success' : 'danger'}}" (click)="toggleSeconds()">
						Seconds - {{seconds ? "ON" : "OFF"}}
					</button>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected time: {{time3 | json}}</pre>
				</div>
			</div>
		</m-material-preview>


		<m-material-preview [viewItem]="exampleSpinners">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time7" [spinners]="spinners"></ngb-timepicker>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<button class="m-t-1 btn btn-sm btn-{{spinners ? 'success' : 'danger'}}" (click)="toggleSpinners()">
						Spinners - {{spinners ? "ON" : "OFF"}}
					</button>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleCustomSteps">
			<div class="m-section">
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time4" [seconds]="true" [hourStep]="hourStep" [minuteStep]="minuteStep" [secondStep]="secondStep"></ngb-timepicker>
					<div class="row">
						<div class="col-sm-3">
							<label for="changeHourStep">Hour Step</label>
							<input id="changeHourStep" type="number" class="form-control form-control-sm" [(ngModel)]="hourStep" />
						</div>
						<div class="col-sm-3">
							<label for="changeMinuteStep">Minute Step</label>
							<input id="changeMinuteStep" type="number" class="form-control form-control-sm" [(ngModel)]="minuteStep" />
						</div>
						<div class="col-sm-3">
							<label for="changeSecondStep">Second Step</label>
							<input id="changeSecondStep" type="number" class="form-control form-control-sm" [(ngModel)]="secondStep" />
						</div>
					</div>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected time: {{time4 | json}}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleCustomValidation">
			<div class="m-section">
				<span class="m-section__sub">
					Illustrates custom validation, you have to select time between 12:00 and 13:59
				</span>
				<div class="m-section__content">
					<div class="form-group">
						<ngb-timepicker [(ngModel)]="time5" [formControl]="ctrl" required></ngb-timepicker>
						<div *ngIf="ctrl.valid" class="small form-text text-success">Great choice</div>
						<div class="small form-text text-danger" *ngIf="!ctrl.valid">
							<div *ngIf="ctrl.errors['required']">Select some time during lunchtime</div>
							<div *ngIf="ctrl.errors['tooLate']">Oh no, it's way too late</div>
							<div *ngIf="ctrl.errors['tooEarly']">It's a bit too early</div>
						</div>
					</div>
				</div>
			</div>
			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__content">
					<pre>Selected time: {{time5 | json}}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfTimepickers">
			<div class="m-section">
				<span class="m-section__sub">
					This timepicker uses customized default values.
				 </span>
				<div class="m-section__content">
					<ngb-timepicker [(ngModel)]="time6" [seconds]="'true'" [spinners]="'false'"></ngb-timepicker>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>